<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>网站信息</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="handleEdit"
          >编辑</el-button
        >
      </div>
      <div class="text item">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign" 
        >
          <el-form-item label="网站名:">
         {{ formLabelAlign.name }}
          </el-form-item>
          <el-form-item label="ICP:">
            {{ formLabelAlign.icp }}
          </el-form-item>
          <el-form-item label="PSR:">
            {{ formLabelAlign.psr }}
          </el-form-item>
          <el-form-item label="Logo:">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 修改网站信息 -->
    <el-dialog title="网站信息" :visible.sync="dialogFormVisible">
      <el-form :model="formLabelAlign">
        <el-form-item label="网站名" label-width="100px">
          <el-input
            v-model="formLabelAlign.name"
            style="width: 400px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="ICP" label-width="100px">
          <el-input
            v-model="formLabelAlign.icp"
            style="width: 400px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="PSR" label-width="100px">
          <el-input
            v-model="formLabelAlign.psr"
            style="width: 400px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="picture" label-width="100px">
          <!-- headers设置上传的请求头部 action上传的地址 on-success文件上传成功的钩子 
          on-preview已上传文件的钩子 on-romove文件移除时的钩子 before-upload上传文件之前的钩子  -->
          <el-upload
            :headers="uploadActionHeaders"
            :action="uploadActionUrl"
            :on-success="handleAvatarSuccess"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :url="dialogFormAvatarFullUrl"
            :before-upload="beforeAvatarUpload"
            list-type="picture"
            :multiple="false"
          >
            <el-button
              size="small"
              type="primary"
              v-once
              v-if="!hiddenUploadBtn"
              >点击上传头像</el-button
            >
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>



<script>
import { modUser, getlist } from "../api/MallMsg";

export default {
  data() {
    return {
      hiddenUploadBtn: false,
      dialogFormAvatarFullUrl: "",
      labelPosition: "right",
      dialogFormVisible: false,
      formLabelAlign: {
        name: "",
        icp: "",
        psr: "",
        logo:""
      },
    };
  },
  methods: {
    // 文件上传前
    beforeAvatarUpload(file) {
      // console.log(this.hiddenUploadBtn);

      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 图片上传成功后
    handleAvatarSuccess(res, file) {
      console.log(res);
      // console.log(file);

      // 显示使用完整路径
      let fullPath = URL.createObjectURL(file.raw);

      this.dialogFormAvatarFullUrl = fullPath;

      //隐藏上传按钮
      this.hiddenUploadBtn = true;
    },

    //删除文件时
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileLength = 0;

      //显示上传按钮
      this.hiddenUploadBtn = false;
    },

    // 预览文件时
    handlePreview(file) {
      console.log(file);
    },
    // 编辑
    handleEdit() {
      this.dialogFormVisible = true;
    },
    // 取消按钮
    handleCancel() {
      this.dialogFormVisible = false;
    },
    // 保存按钮
    handleSave() {
      this.dialogFormVisible = false;
      console.log(this.formLabelAlign);
      modUser(this.formLabelAlign).then((res) => {
        console.log(res);
      });
    },
    //拉取数据
    fetchData() {
      getlist()
        .then((res) => {
          console.log(res);
          this.formLabelAlign = res.data.data[0];
          console.log(this.formLabelAlign)
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  computed: {
    uploadActionHeaders() {
      return {
        Authorization: "Bearer " + "token",
      };
    },
    uploadActionUrl() {
      let baseUrl = "http://localhost:5000";
      let url = "/files/uploadfiles";
      return baseUrl + url;
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style>
.box-card {
  margin: auto;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>